<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title u-m-b-auto">欢迎登录</view>

			<u--input class="un" v-model="username" placeholder="请输入账号" border="bottom" maxlength="20" clearable>
			</u--input>

			<u--input class="pwd" v-model="password" type="password" placeholder="请输入密码" border="bottom" maxlength="18"
				clearable></u--input>
		</view>

		<view>
			<u-button text="登 录" @tap="submit" :customStyle="loginBtnStyle" />
		</view>
		<view style="margin-top: 20rpx;">
			<u-button :customStyle="wxLoginBtnStyle" text="微信快捷登录" @click="wxLogin" />
		</view>

		<view class="tool m-flex-row u-row-between u-font-28">
			<view @click="nav('/pages-other/forget-login-pwd/forget-login-pwd')">忘记密码</view>
			<view></view>
			<view @click="nav('/pages-other/register/register')">注册账号</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				loginBtnStyle: {
					width: '636rpx',
					height: '88rpx',
					borderRadius: '120rpx',
					background: '#6072FF',
					color: '#fff',
				},
				wxLoginBtnStyle: {
					width: '636rpx',
					height: '88rpx',
					borderRadius: '120rpx',
					background: '#0abc64',
					color: '#fff',
				},
				storageKeyEnum: this.$storageKeyEnum,
			}
		},

		onLoad() {
			this.username = this.$helpers.getCache(this.storageKeyEnum.username) || '';
			this.password = this.$helpers.getCache(this.storageKeyEnum.password) || '';
			if (!this.$u.test.isEmpty(this.username) && !this.$u.test.isEmpty(this.password)) {
				uni.showLoading({
					mask: true,
					title: '正在自动登录...'
				})
				setTimeout(() => {
					this.submit();
				}, 1000)
			}
		},
		methods: {
			wxLogin() {
        uni.showLoading({
          mask: true,
          title: '正在登录...'
        })
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let params = {
							code: loginRes.code,
						};
						that.$login.getUserInfo(params);
					}
				});
			},
			submit() {

				this.username = this.$u.trim(this.username, 'all');
				this.password = this.$u.trim(this.password, 'all');

				if (this.$u.test.isEmpty(this.username)) {
					this.$helpers.toast('请输入账号');
					return
				}

				if (this.$u.test.isEmpty(this.username)) {
					this.$helpers.toast('请输入密码');
					return
				}

				let params = {
					username: this.username,
					password: this.password
				}

				uni.showLoading({
					mask: true,
					title: '正在登录...'
				})
				this.$api('user.login', params).then(res => {
					uni.hideLoading();
					if (res.status == 0 && res.data != null) {
						this.$store.commit("SET_PROMPTS_FOR_LOGIN", false)
            this.$helpers.setCache(this.storageKeyEnum.username, this.username)
            this.$helpers.setCache(this.storageKeyEnum.password, this.password)

						this.$store.commit("SET_TOKEN", res.data.token)
						res.data.token = null;
						this.$store.commit("SET_USER_INFO", res.data);
						this.$helpers.toast('登录成功', 'success', 3000, true, () => {
              this.$socket.reacquire();//登录后重新连接webSock
              if(res.data.temporaryRole){
                uni.reLaunch({
                  url: '/pages-vending-machine/bluetooth-replenishment/bluetooth-replenishment?isReturnAllowed=' + false
                })
              }else{
                uni.reLaunch({
                  url: '/pages/home/home?theStatusOfTheInput=true'
                })
              }
						})
					} else {
						getApp().err('登录失败，' + res.msg);
					}
				}).catch(err => {
					uni.hideLoading();
					getApp().err('登录失败，' + err.toString());
				});

			},

			nav(u) {
				uni.navigateTo({
					url: u
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #fff;
		height: 100vh;
		font-size: 28rpx;

		.content {
			/deep/ .uni-input-placeholder {
				color: grey !important;
			}

			width: 600rpx;
			margin: 0 auto;
			padding-top: 200rpx;

			.title {
				text-align: left;
				font-size: 46rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			/deep/ .u-input {
				margin-bottom: 80rpx;
			}
		}

		.tool {
			width: 600rpx;
			margin: 0 auto;
			margin-top: 42rpx;
			color: rgba(0, 0, 0, 0.7);
		}
	}
</style>
